<template>
	<MyPage title="报价单" :isback="true" :isborder="true">
		<view slot="right"><u-icon name="list" color="#999" size="40" @click="menuListShow=true"></u-icon></view>
		<view slot="gBody">
			<!-- 顶部更多菜单 -->
			<u-action-sheet :list="menuList" @click="menuListClick" v-model="menuListShow"></u-action-sheet>
			<!-- title -->
			<view class="title-view">
				<view class="left">
					<view class="title">{{title}}</view>
				</view>
				<view class="right"><u-icon name="order" color="#999" size="28" class="margin-right10" style="vertical-align:top"></u-icon>{{dataCount}}</view>
			</view>
			<!-- main -->
			<view class="main">
				<scroll-view class="main-left" :class="isFixed?'is-fixed':''">
					<view
						class="title"
						v-for="(item, index) in dataList"
						:key="index"
						@click="typeClick(item.id)"
					>
						{{item.type}}<text v-if="itemNumber(item.list)">{{itemNumber(item.list)}}</text>
					</view>
				</scroll-view>
				<view class="main-right" id="mainRight">
					<view
						class="right-list"
						v-for="(item, index) in dataList"
						:key="index"
					>
						<view class="title grey" :id="'list'+item.id">{{item.type}}</view>
						<view
							class="child-list"
							v-for="(child, index) in item.list"
							:key="index"
						>
							<view class="child-title">{{child.title}}</view>
							<view class="child-price">
								<text class="red">￥<text class="big">{{child.price}}</text></text>
								<text class="grey">成本￥{{child.costPrice}}</text>
								<view class="add-icon add-more" v-if="child.specifications||child.parts" @click="specificationsPopFun(child)">选规格</view>
								<u-icon :color="child.inCart?'#aaa':'#B00E0E'" size="40" class="add-icon" :name="child.inCart?'minus-circle':'plus-circle-fill'" @click="child.inCart=!child.inCart" v-else></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 选规格弹框 -->
			<u-popup mode="bottom" v-model="specificationsPopShow">
				<view class="pop-box specifications-box">
					<view class="title">{{specificationsObj.title}}</view>
					<view class="content">
						<view
							v-for="(item, index) in specificationsObj.specifications"
							:key="index"
						>
							<view class="grey content-title">{{item.type}}</view>
							<view class="content-list-box">
								<view
									class="content-list"
									v-for="(child, childIndex) in item.typeList"
									:key="childIndex"
									:class="item.typeCur==childIndex?'cur':''"
									@click="specificationsListClick(index,childIndex)"
								>{{child.title}}</view>
							</view>
						</view>
						<MyBtn title="立即添加" class="btn" @click="specificationsPopShow=false"></MyBtn>
					</view>
				</view>
			</u-popup>
			<!-- footer -->
			<view class="footer">
				<view class="footer-box">
					<view class="compute-box">
						<u-icon name="checkbox-mark" color="#bbb" size="40" class="margin-right10"></u-icon>
						已选
						<text class="red">{{selectedList.length}}</text>
						个
					</view>
					<view class="btn red-bg" @click="btnSubmit">生成价格表</view>
				</view>
			</view>
		</view>
	</MyPage>
</template>

<script>
import mixin from "@/libs/mixin.js";
import { getZzList } from '@/api/index.js'
export default{
	mixins: [mixin],
	data() {
		return {
			id: '',
			menuListShow:false,
			menuList:[
				{text: '删除报价单'}
			],
			title: '华为手机报价单',
			dataList: [
				{
					id:1,
					type:'mate系列',
					list:[
						{title:'mate9 pro',price:'4999',costPrice:'4500',inCart:false},
						{title:'mate10',price:'4999',costPrice:'4500',inCart:false,
							specifications:[
								{type:'颜色',typeList:[
									{title:'象牙白',price:'4999'},
									{title:'天空蓝色',price:'5099'}
								]},
								{type:'版本',typeList:[
									{title:'8+128g',price:'4999'},
									{title:'8+256g',price:'5099'},
									{title:'12+256g',price:'5099'}
								]}
							]
						},
						{title:'mate10保时捷版',price:'4999',costPrice:'4500',inCart:false},
						{title:'mate20国色天香色-胡歌签名版本',price:'4999',costPrice:'4500',inCart:false},
						{title:'mate30',price:'4999',costPrice:'4500',inCart:false},
						{title:'mate40',price:'4999',costPrice:'4500',inCart:false},
						{title:'mate50 pro',price:'4999',costPrice:'4500',inCart:false},
						{title:'mate50保时捷版',price:'4999',costPrice:'4500',inCart:false}
					],
				},
				{
					id:1,
					type:'P系列',
					list:[
						{title:'P10定制版',price:'4999',costPrice:'4500',inCart:false},
						{title:'P20 pro',price:'4999',costPrice:'4500',inCart:false},
						{title:'P30',price:'4999',costPrice:'4500',inCart:false},
						{title:'P40',price:'4999',costPrice:'4500',inCart:false},
						{title:'P50 pro',price:'4999',costPrice:'4500',inCart:false},
						{title:'P50尊享版',price:'4999',costPrice:'4500',inCart:false},
						{title:'P50折叠屏幕版',price:'4999',costPrice:'4500',inCart:false}
					],
				}
			],
			mainScrollTop: 100,
			isFixed: false,
			specificationsPopShow:false,
			specificationsObj:{}
		}
	},
	computed: {
		//顶部更多菜单-点击
		menuListClick(index) {
			console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
		},
		// 计算商品总数
		dataCount(){
			let count = 0;
			this.dataList.forEach(item=>{
				count += item.list.length
			});
			return count
		},
		// 计算选择的数组
		selectedList(){
			let arrList = [];
			this.dataList.forEach(item=>{
				item.list.forEach(child=>{
					if(child.inCart == true){
						arrList.push(child);
					}
				});
			});
			return arrList
		},
		//计算小标题各自选中的数量
		itemNumber(){
			return function(arrList){
				let num = arrList.filter(item=>{
					return item.inCart
				}).length;
				return num>0 ? num : '';
			}
		}
	},
	onLoad(option) {
		//获取路由参数
		this.id = option.id ? option.id : '';
		// 获取所有资质列表
		this.getList();
	},
	onReady(){
		uni.createSelectorQuery().select("#mainRight").boundingClientRect(res=>{
			this.mainScrollTop = res.top;
		}).exec();
	},
	onPageScroll(Obj){
		this.isFixed = Obj.scrollTop>=this.mainScrollTop ? true : false;
	},
	methods:{
		// 根据大分类id获取列表内容
		getList(){
			// getZzList({id:this.id, cityid:this.myCityObj.key}).then(res=>{
			// 	this.dataList = res.list;
			// 	this.title = res.title;
			// 	if(res.banner){	this.banner = res.banner;}
			// }).catch(err=>{
			// 	uni.showToast({
			// 		title: err.msg,
			// 		icon:'none'
			// 	})
			// });
		},
		// left-类别点击跳转锚点
		typeClick(id){
			uni.createSelectorQuery().select("#list"+id).boundingClientRect(res=>{//最外层盒子的节点：类或者id
				uni.pageScrollTo({
					  duration: 100,
					  scrollTop: res.top
				})
			}).exec();
		},
		// right-选规格弹框
		specificationsPopFun(child){
			child.specifications.forEach(item=>{
				item.typeCur = 0;
			});
			this.specificationsObj=child;
			this.specificationsPopShow=true;
		},
		// right-选规格-列表项点击
		specificationsListClick(index,childIndex){
			let obj = this.specificationsObj.specifications[index];
			obj.typeCur = childIndex;
			this.$set(this.specificationsObj.specifications,index,obj);
		},
		// 提交
		btnSubmit(){
			console.log(this.selectedList);
			if( this.selectedList.length<1 ){
				uni.showToast({
					title: '请选择内容！',
					icon:'none'
				});
				return false;
			}
			this.$utils.navigateTo('/diy/goods-compute',{
				
			});
			// var ids = this.selectedList.map(item=>{
			// 	return item.id
			// });
			// console.log('+++++++');
			// console.log(ids)
			// console.log(this.myCityObj.key)
			// console.log(this.cycleCur.value)
			// console.log('+++++++++');
			// this.$utils.navigateTo('/compute/content',{
			// 	cycle: this.cycleCur.value,
			// 	ids: ids,
			// 	cityKey: this.myCityObj.key
			// });
		}
	}
}
</script>

<style lang="scss">
page{
	background:#f3f3f3;
}
</style>
<style lang="scss" scoped>
.title-view{
	width: 100%;
	position:relative;
	z-index: 1;
	background: #fff;
	border-radius: 30rpx 30rpx 0 0;
	padding: 30rpx 40rpx;
	display: flex;
	justify-content: space-between;
	.left{
		.title{
			font-size:34rpx;
		}
		.sub-title{
			font-size:26rpx;
		}
	}
	.right{
		box-sizing: border-box;
		padding-top:10rpx;
		line-height: 1.1em;
	}
}
.main{
	display: flex;
	justify-content: flex-end;
	.main-left{
		width:25%;
		text-align: center;
		.title{
			position:relative;
			padding: 30rpx 10rpx;
			box-sizing: border-box;
			line-height: 1.2em;
			font-size:22rpx;
			text{
				position:absolute;
				top:8rpx;
				right:8rpx;
				width:32rpx;
				height:32rpx;
				line-height:30rpx;
				font-size:20rpx;
				background:#de1b1b;
				text-align: center;
				color:#fff;
				border-radius: 50%;
			}
		}
		&.is-fixed{
			position:fixed;
			top:44px;
			left:0;
			bottom:100rpx;
			padding-top:40rpx;
			z-index:9;
			background:#f3f3f3;
		}
	}
	.main-right{
		background: #fff;
		width:75%;
		box-sizing: border-box;
		padding:0 35rpx;
		.title{
			margin-top:40rpx;
			font-size:24rpx;
		}
		.child-list{
			padding:25rpx 0 25rpx 30rpx;
			border-bottom:1px #eee solid;
			position:relative;
			.child-title{
				font-size:30rpx;
				line-height:1.2em;
			}
			.child-price{
				margin-top:6rpx;
				font-size:24rpx;
				.big{
					font-size:28rpx;
				}
				.grey{
					margin-left:20rpx;
				}
			}
			.add-icon{
				position:absolute;
				right:0;
				bottom:25rpx;
			}
			.add-more{
				background:#B00E0E;
				color:#fff;
				font-size:20rpx;
				border-radius: 20rpx;
				padding:0 18rpx;
				height:36rpx;
				line-height:36rpx;
			}
		}
	}
}
.content{
	.content-title{
		
	}
	.content-list-box{
		margin:16rpx 0;
		overflow: hidden;
		.content-list{
			float:left;
			padding:0 20rpx;
			min-width:150rpx;
			white-space: nowrap;
			border:1px #ccc solid;
			color:#333;
			text-align: center;
			border-radius: 20rpx;
			margin:0 15rpx 15rpx 0;
			&.cur{
				border:1px #B00E0E solid;
				background:rgba(176,14,14,.08);
				color:#B00E0E;
			}
		}
	}
}
.footer{
	width:100%;
	height:100rpx;
	.footer-box{
		position:fixed;
		left:0;
		bottom:0;
		z-index:10;
		width:100%;
		height:100rpx;
		background: #fff;
		box-shadow: 0 0 30rpx rgba(0,0,0,.2);
		display: flex;
		justify-content: space-between;
		.compute-box{
			padding:18rpx 0 0 30rpx;
			.red{
				margin:0 10rpx;
				font-size:45rpx;
			}
		}
		.btn{
			width:210rpx;
			height:100rpx;
			line-height:100rpx;
			text-align: center;
			font-size:30rpx;
		}
	}
}
</style>